<template>
    <div class="messageComp">
          <!-- 通过refs调用弹窗组件 -->
    </div>
  </template>
  
  <script setup>
  import { ref,getCurrentInstance,h } from "vue"
  import { useStore } from "vuex";
  const store = useStore()
  const { appContext,ctx } = getCurrentInstance()
  import { ElMessage } from 'element-plus'
  import { ElNotification,  } from 'element-plus'
  
  const messageInfo = (text)=>{
      ElMessage({
          type:'info',
          message:text,
          duration:3000,
          showClose:true,
      }, appContext)
  }
  const messageWarning = (text)=>{
      ElMessage({
          type:'warning',
          message:text,
          duration:4000,
          showClose:true,
      }, appContext)
  }
  const messageSuccess = (text)=>{
      ElMessage({
          type:'success',
          message:text,
          duration:3000,
          showClose:true,
      }, appContext)
  }
  const messageFail = (text)=>{
      ElMessage({
          type:'error',
          message:text,
          duration:3000,
          showClose:true,
      }, appContext)
  }
  const messageNetFail = (text)=>{
      ElMessage({
          icon:'Link',
          message:text,
          customClass:'link',
          duration:3000,
          showClose:true,
      }, appContext)
  }
  // -------- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----通知消息
  const notifySuccess = (text) => {
      ElNotification({
          title: '系统消息提示',
          type:'success',
          message: h('i', { style: 'color: teal' }, text),
          duration: 4000,
      })
  }
  const notifyFail = (text) => {
      ElNotification({
          title: '系统消息提示',
          type:'error',
          message: h('i', { style: 'color: crimson' }, text),
          duration: 3000,
      })
  }
  const notifyWarning = (text) => {
      ElNotification({
          title: '系统消息提示',
          type:'warning',
          message: h('i', { style: 'color: yellow' }, text),
          duration: 3000,
      })
  }
  import { ElLoading } from 'element-plus';
  
  const loading = (options,time = 1000, fn) => {
    if (typeof options === 'number') { //说明只传了一个
        time = options
    }
    if (typeof time === 'function') {
        fn = time
    }
    const config = {
        target:options.dom || 'body',
        body:true,
        lock: true,
        text: options.text || '数据载入中..',
        background:options.color || 'rgba(0, 0, 0, 0.6)',
    }
      const loadingInstance = ElLoading.service(config);
      setTimeout(() => {
          loadingInstance.close();
          if (typeof fn === 'function') {
              fn();
          }
      }, time);
  }
  
  defineExpose({
      messageInfo,
      messageWarning,
      messageSuccess,
      messageFail,
      messageNetFail,
      //---- ----通知消息
      notifySuccess,
      notifyWarning,
      notifyFail,
      // 加载
      loading
  })
  </script>
  
  <style scoped>
  .link{
      color: crimson;
      font-size: 25px;
  }
  .link>p{
      color: gray !important;
      letter-spacing: 2px;
  }
  
  </style>